<!--
    报价明细
 -->
<template>

  <div class="detail-header">
    <a-page-header :title="detail.quotationName">
      <template #extra>
        <a-button @click="toEditQuotation" type="primary">编辑</a-button>
      </template>
      <div>
        <a-descriptions size="small" :column="3">
          <a-descriptions-item label="长">{{ detail.quotationLong }}</a-descriptions-item>
          <a-descriptions-item label="宽">{{ detail.quotationHeight }}</a-descriptions-item>
          <a-descriptions-item label="备注">{{ detail.remark}}</a-descriptions-item>
          <a-descriptions-item label="综合单价">{{ detail.comprehensiveUnitPrice}}</a-descriptions-item>
        </a-descriptions>
      </div>
    </a-page-header>
  </div>


  <a-card
      class="smart-margin-top10"
      size="small">
    <a-tabs>
      <a-tab-pane key="quotation" tab="报价明细管理" >
        <QuotationItemList :projectId="projectId" :quotationId="quotationId"/>
      </a-tab-pane>
      <a-tab-pane key="cutting" tab="下料管理" >
        <CuttingInfoList :projectId="projectId" :quotationId="quotationId" :quotationName="detail.quotationName"/>
      </a-tab-pane>
      <a-tab-pane key="outbound" tab="出库管理" >
        <OutboundInfoList :projectId="projectId" :quotationId="quotationId" />
      </a-tab-pane>
    </a-tabs>
    <ProjectInfoForm  ref="operateRef" />
  </a-card>
</template>

<script setup>
  import {reactive, ref, onMounted, watch} from 'vue';
  import { message, Modal } from 'ant-design-vue';
  import { SmartLoading } from '/src/components/framework/smart-loading';
  import { quotationApi } from '/src/api/business/project/quotation-api';
  import { PAGE_SIZE_OPTIONS } from '/src/constants/common-const';
  import { smartSentry } from '/src/lib/smart-sentry';
  import {useRoute, useRouter} from "vue-router";
  import ProjectInfoForm from "/@/views/business/erp/project/project-info-form.vue";
  import QuotationItemList from "/@/views/business/erp/project/components/quotation-item-list.vue";
  import CuttingInfoList from "/@/views/business/erp/project/components/cutting-info-list.vue";
  import OutboundInfoList from "/@/views/business/erp/project/components/outbound-info-list.vue";

  const route = useRoute();

  let projectId = ref();
  let quotationId = ref();
  onMounted(() => {
    if (route.query.projectId) {
      projectId.value = Number(route.query.projectId);
    }
    if (route.query.quotationId) {
      quotationId.value = Number(route.query.quotationId);
      getDetail();
    }
  });

  // 详情
  let detail = ref({});

  async function getDetail() {
    try {
      let result = await quotationApi.sortDetail(quotationId.value);
      detail.value = result.data;
    } catch (error) {
      smartSentry.captureError(error);
    } finally {
      SmartLoading.hide();
    }
  }

  let router = useRouter();
  function toEditQuotation() {
    router.push({ path: '/erp/project/components/quotation-form',
      query: { projectId: projectId.value, quotationId: quotationId.value } });
  }


</script>

<style scoped lang="less">
  .detail-header {
    background-color: #fff;
    padding: 10px;
  }
</style>